<template>
	<view class="pages-grade rel">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="师傅等级" leftIcon="icon-left"
			color="#ffffff" :backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		<view class="grade-info pd-lg flex-y-center fill-base radius-16 ml-md mr-md mt-md">
			<image src="../../static/images/time.png" mode="aspectFill" class="grade-header"></image>
			<view class="pl-md">
				<view class="f-sm-title text-bold">张三</view>
				<view class="flex-y-center">
					<i class="iconfont iconyixingfuwuyuan" :style="{color: primaryColor,fontSize: '18px'}"></i>
					<text class="f-title c-paragraph" style="padding-left: 6rpx;">一星师傅</text>
				</view>
			</view>
		</view>
		<view class="mt-md fill-base radius-16 pl-lg pr-lg ml-md mr-md">
			<view class="h-110 flex-between">
				<text class="f-title text-bold">当期数据</text>
				<text class="f-desc c-paragraph" @tap="$util.goUrl({url: `/user/pages/up-rule`})">升级规则</text>
			</view>
			<view class="flex-warp current-data">
				<view class="flex-column current-data-item pt-sm" :style="{paddingLeft: index%3*30 + 20 + 'rpx'}" v-for="(item,index) in dataList" :key="index">
					<view class="f-mini-title c-paragraph">{{item.title}}</view>
					<view class="flex-y-baseline pt-sm">
						<text class="f-lg-title text-bold">{{item.number}}</text>
						<text class="f-caption text-bold">{{item.unit}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="ml-md mt-md mr-md radius-16 pl-lg pr-lg fill-base pb-sm">
			<view class="h-110 f-title text-bold flex-y-center">中级师傅考核标准</view>
			<view class="pt-sm pb-lg" v-for="(item,index) in progressList" :key="index">
				<view class=" flex-y-center">
					<text class="f-mini-title">{{item.name}}</text>
					<text class="f-paragraph f-mini-title pl-md">{{item.title}}</text>
				</view>
				<view class="pt-md">
					<view class="rel progress">
						<view class="progress-cont" :style="{background: primaryColor, width: `${item.number}%`}"></view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import tabbar from "@/components/tabbar.vue"
	
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				dataList: [
					{title: '在线时长', number: '93', unit: '小时'},
					{title: '服务时长', number: '93', unit: '小时'},
					{title: '接单率', number: '93', unit: '%'},
					{title: '退单率', number: '12', unit: '%'},
					{title: '好评率', number: '99', unit: '%'},
					{title: '分佣比例', number: '20', unit: '%'}
				],
				progressList: [
					{name: '在线时长(小时)' ,title: '80/90', number: 50},
					{name: '服务时长(小时)' ,title: '80/90', number: 20},
					{name: '接单率(%)' ,title: '80/90', number: 10},
					{name: '退单率(%)' ,title: '80/90', number: 40},
					{name: '好评率(%)' ,title: '80/90', number: 80}
				]
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo
		}),
		async onLoad(options) {
			this.initIndex()
		},
		async onShow() {},
		async onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.$util.showLoading()
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		async onReachBottom() {},
		onShareAppMessage(e) {},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false){
				if(!this.configInfo.id || refresh){
					this.getConfigInfo()
				}
			},
			initRefresh(){
				this.initIndex(true)
			}
		},
	}
</script>


<style lang="scss">
	.pages-grade {
		.grade-header{
			width: 106rpx;
			height: 106rpx;
			border-radius: 106rpx;
		}
		.current-data{
			.current-data-item{
				padding-bottom: 40rpx;
				width: 33%;
			}
		}
		.progress{
			height: 26rpx;
			border-radius: 26rpx;
			background-color: #F5F5F5;
			.progress-cont{
				height: 26rpx;
				border-radius: 26rpx;
				width: 50%;
			}
		}
	}
</style>
